<template>
  <div class="info">
    <van-nav-bar
      title="个人信息"
      left-arrow
      left-text="返回"
      right-text="保存"
      @click-right="rightClick"
      @click-left="leftClick"
    ></van-nav-bar>
    <div class="info_item">
      <MyCell title="头像" type="img" @click.native="imgClick"></MyCell>
      <MyCell
        title="昵称"
        :value="itemuser.name"
        @click.native="nameClick"
      ></MyCell>
      <MyCell title="介绍" value="123123"></MyCell>
      <MyCell
        title="性别"
        :value="objGender[itemuser.gender]"
        @click.native="showGender = true"
      ></MyCell>
      <MyCell
        title="生日"
        :value="itemuser.birthday | dateFormat"
        @click.native="showBirthday = true"
      ></MyCell>
    </div>
    <!-- 修改昵称 -->
    <van-popup class="names" v-model="showName" position="bottom">
      <van-field
        ref="form"
        class="nameedit"
        v-model="value"
        label="昵称"
        placeholder="请输入昵称"
      />
      <van-button class="name" block type="info" @click="namesclick"
        >确定</van-button
      >
    </van-popup>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(objGender)"
        @confirm="genderConfirm"
        @cancel="showGender = false"
      />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        type="date"
        v-model="currentDate"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birsthdayconfirm"
        @cancel="birsthdaycancel"
      />
    </van-popup>
    <van-popup v-model="showImg">
      <van-uploader v-model="fileList" max-count="1" />
    </van-popup>
  </div>
</template>

<script>
import MyCell from '@/views/home/my/MyCell.vue'
import { appV10UserProfile } from '@/api/my.js'
import { Toast } from 'vant'
export default {
  name: 'Info',
  data () {
    return {
      value: '',
      itemuser: {},
      objGender: {
        0: '男',
        1: '女'
      },
      showName: false,
      showGender: false,
      showBirthday: false,
      showImg: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2020, 0, 1),
      currentDate: new Date(),
      fileList: [
        // { url: '@/assets/logo.png' },
        // { url: 'https://cloud-image', isImage: true }
      ]
    }
  },
  components: {
    MyCell
  },
  async created () {
    const res = await appV10UserProfile()
    console.log(res)
    this.itemuser = res.data
  },

  methods: {
    rightClick () {
      Toast.success('保存成功')
    },
    leftClick () {
      this.$router.push('/home/my')
    },
    nameClick () {
      this.value = this.itemuser.name
      this.showName = true
    },
    genderConfirm (value, index) {
      this.showGender = false
      this.itemuser.gender = index
    },
    birsthdayconfirm (value) {
      this.showBirthday = false
      this.itemuser.birthday = value
      console.log(value)
    },
    birsthdaycancel () {
      this.showBirthday = false
    },
    namesclick () {
      console.log(this.$refs.form.value)
      this.showName = false
      this.itemuser.name = this.$refs.form.value
    },
    imgClick () {
      this.showImg = true
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  .names {
    padding: 10px;
    .nameedit {
      background-color: #ccc;
    }
    .name {
      border-radius: 8px;
      color: white;
    }
  }
}
</style>
